<template>
	<view>
		<view class="uni-container">
			<view>
				<uni-fab
					:pattern="pattern"
					:content="content"
					horizontal="right"
					:vertical="vertical"
					direction="vertical"
					@trigger="trigger"
				></uni-fab>
			</view>
			<uni-section title="左侧滑出" type="line">
				<view class="example-body">
					<uni-drawer ref="showLeft" mode="left" width="100rpx" @change="change($event,'showLeft')">
						
					</uni-drawer>
				</view>
			</uni-section>
			<uni-table ref="table" :loading="loading" border stripe type="selection" emptyText="暂无更多数据" @selection-change="selectionChange">
				<uni-tr>
					<uni-th width="150" align="center">日期</uni-th>
					<uni-th width="150" align="center">姓名</uni-th>
<!-- 					<uni-th align="center">地址</uni-th> -->
					<uni-th width="204" align="center">设置</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in tableData" :key="index">
					<uni-td>{{ item.id }}</uni-td>
					<uni-td>
						<view class="name">{{ item.val }}</view>
					</uni-td>
					<!-- <uni-td align="center">{{ item.address }}</uni-td> -->
					<uni-td>
						<view class="uni-group">
							<button class="uni-button" size="mini" type="primary">修改</button>
							<button class="uni-button" size="mini" type="warn">删除</button>
						</view>
					</uni-td>
				</uni-tr>
			</uni-table>
			<view class="uni-pagination-box"><uni-pagination show-icon page-size="5" :current="1" :total="total" @change="change" /></view>
		</view>
	</view>
</template>


<script setup>

import {ref} from 'vue'

// 使用内置SQLite数据库操作工具类
import dbUtils from '@/uni_modules/zjy-sqlite-manage/components/zjy-sqlite-manage/dbUtils.js';

const pattern = ref({
	color: '#9799a5',
	backgroundColor: '#fff',
	selectedColor: '#28B389',
	buttonColor: '#fff',
	iconColor: "#28B389",
	icon:"left",
});
const content = ref([{
		"iconPath": "/static/images/tabBar/home.png",
		"selectedIconPath": "/static/images/tabBar/home-h.png",
		text: '相册',
		active: true
	},
	{
		"iconPath": "/static/images/tabBar/classify.png",
		"selectedIconPath": "/static/images/tabBar/classify-h.png",
		text: '首页',
		active: false
	},
	{
		"iconPath": "/static/images/tabBar/user.png",
		"selectedIconPath": "/static/images/tabBar/user-h.png",
		text: '收藏',
		active: false
	}
]);

//const activeContentList = content.value.map(item=>item.active)

const trigger = (e)=>{
	console.log(e)
	if(!content.value[e.index].active){
		content.value[content.value.findIndex(item=>item.active)].active = false
		content.value[e.index].active = true
		showDrawer()	
	}
}

// 使用 ref 创建一个响应式引用
const showLeft = ref(null);

// 定义 showDrawer 方法
const showDrawer = () => {
  // 如果 showRight 是一个 ref 对象，需要使用 .value 来访问它的值
  showLeft.value.open();
};


const table = ref(true)
//const loading = ref(true)

dbUtils.openDb("demo")

const tableData = ref([])

console.log(dbUtils.getTable("demo"));

dbUtils.getTableDate("demo","news").then(data=>{
	console.log(data)
	tableData.value = data
})

const total = ref(0)

dbUtils.getCount("demo","news").then(count=>{
	console.log(count)
	total.value = count[0].num
})

// const tableData = ref([{
//     "date": "2020-09-01",
//     "name": "Dcloud1",
//     "address": "上海市普陀区金沙江路 1518 弄"
// }, {
//     "date": "2020-09-02",
//     "name": "Dcloud2",
//     "address": "上海市普陀区金沙江路 1517 弄"
// }, {
//     "date": "2020-09-03",
//     "name": "Dcloud3",
//     "address": "上海市普陀区金沙江路 1519 弄"
// }, {
//     "date": "2020-09-04",
//     "name": "Dcloud4",
//     "address": "上海市普陀区金沙江路 1516 弄"
// }, {
//     "date": "2020-09-05",
//     "name": "Dcloud5",
//     "address": "上海市普陀区金沙江路 1518 弄"
// }])

</script>

<style lang="scss">
.uni-container{
	padding: 0 30rpx;
}
.uni-group {
	display: flex;
	align-items: center;
}
</style>
